import React, { useState, useEffect } from 'react'

interface FileRenameModalProps {
  file: File | null
  isOpen: boolean
  onClose: () => void
  onConfirm: (renamedFile: File) => void
}

const FileRenameModal: React.FC<FileRenameModalProps> = ({
  file,
  isOpen,
  onClose,
  onConfirm
}) => {
  const [newFileName, setNewFileName] = useState('')

  // 当文件变化时，生成默认文件名
  useEffect(() => {
    if (file) {
      const extension = file.name.split('.').pop()
      const defaultName = `${new Date().getTime()}.${extension || 'png'}`
      setNewFileName(defaultName)
    }
  }, [file])

  if (!isOpen || !file) return null

  const handleConfirm = () => {
    if (!newFileName.trim()) return

    // 确保文件名有正确的扩展名
    const originalExt = file.name.split('.').pop() || ''
    let finalName = newFileName.trim()
    if (!finalName.endsWith(`.${originalExt}`)) {
      finalName = `${finalName}.${originalExt}`
    }

    // 创建重命名后的文件
    const renamedFile = new File([file], finalName, {
      type: file.type,
      lastModified: file.lastModified,
    })

    onConfirm(renamedFile)
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleConfirm()
    }
  }

  return (
    <div 
      className="fixed inset-0 bg-black/60 flex items-center justify-center z-[60] p-4"
      onClick={onClose}
    >
      <div 
        className="bg-card rounded-lg shadow-xl p-6 w-full max-w-md" 
        onClick={(e) => e.stopPropagation()}
      >
        <h3 className="text-lg font-semibold text-foreground mb-4">重命名文件</h3>
        <p className="text-sm text-muted-foreground mb-4">
          检测到粘贴的文件名为默认名称，请修改为更有意义的名称：
        </p>
        
        <div className="space-y-2">
          <div className="text-sm text-muted-foreground">
            <span className="font-medium">原文件名：</span>
            <span className="truncate">{file.name}</span>
          </div>
          <input
            type="text"
            value={newFileName}
            onChange={(e) => setNewFileName(e.target.value)}
            onKeyDown={handleKeyDown}
            className="w-full rounded-md border border-input bg-background px-3 py-2 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-primary"
            placeholder="输入新文件名称"
            autoFocus
          />
        </div>
        
        <div className="mt-6 flex justify-end space-x-3">
          <button
            type="button"
            onClick={onClose}
            className="px-4 py-2 rounded-md text-sm font-medium text-muted-foreground hover:bg-muted transition-colors"
          >
            取消
          </button>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={!newFileName.trim()}
            className="px-4 py-2 rounded-md text-sm font-medium text-white bg-primary hover:bg-primary-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            确认并上传
          </button>
        </div>
      </div>
    </div>
  )
}

export default FileRenameModal
